<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>录入自定义页面</title>
		<!-- 引入 css -->
		<link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
		<!-- 引入 js -->
		<script src="/admin/plugin/wangEditor/index.js"></script>

		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>
		<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

		<!--    引入Layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
		<style type="text/css">
			.layui-table-click {
				background-color: cadetblue !important;
				color: white;
			}

			::-webkit-scrollbar {
				width: 6px;
				height: 10px;
				background-color: rgba(255, 255, 255, 0.1);
			}

			::-webkit-scrollbar-thumb {
				background: rgba(144, 147, 153, .3);
				border-radius: 4px;
				cursor: pointer;
			}

			.layui-form-label {
				float: left;
				display: block;
				padding: 7px 1px;
				width: 100px;
				font-weight: 400;
				line-height: 14px;
				text-align: right;
			}

			/**输入框高度设置**/
			.layui-input,
			.layui-select,
			.layui-textarea {
				height: 30px;
				line-height: 30px\9;
			}

			/**按钮样式设置**/
			.layui-btn {
				height: 30px;
				line-height: 30px;
				font-size: 13px;
			}

			.layui-btn+.layui-btn {
				margin-left: 0px;
			}

			.layui-table,
			.layui-table-view {
				margin: 0px 0;
			}

			
			.tableboxs{
				margin: 0 auto;
				width: 80%;
				position: relative;
			}
			
			.zuofei{
				position: absolute;
				width: 100%;
				display: flex;
				justify-content: center;
				top: 40px;
			}
			
			.tablebox {
				margin: 0 auto;
				width: 80%;
				text-align: center;
			}

			.tablebox .titletop {
				margin-bottom: 10px;
				margin-top: 10px;
				font-size: 20px;
				font-weight: 700;
			}

			.tablebox .spans {
				width: 100%;
				text-align: right;
				margin-bottom: 5px;
			}

			.tablebox .spans .maincol {
				color: #ff0000;
				font-weight: 700;
			}

			.tablebox .spans div {
				display: flex;
				justify-content: space-between;
			}

			.tablebox td,
			.tablebox th {
				height: 30px;
				padding: 5px 10px;
			}

			.posbottom {
				width: 80%;
				margin: 10px auto;
			}

			.posbottom div {
				display: flex;
				justify-content: space-between;
			}

			/* 下载 */
			.topicon{
				width: 98%;
				margin: 10px auto 0;
				overflow: hidden;
				
			}
			.layui-inline {
				float: right;
				width: 17px;
				height: 17px;
				padding: 5px;
				line-height: 16px;
				margin-right: 10px;
				text-align: center;
				color: #333;
				border: 1px solid #ccc;
				cursor: pointer;
				transition: .5s all;
			}
			.layui-icon {
			    font-family: layui-icon!important;
			    font-size: 16px;
			    font-style: normal;
			}
		</style>
	</head>
	<body id="app">
		<!-- <div class="topicon">
			<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i
					class="layui-icon layui-icon-print"></i></div>
		</div> -->
		<div class="topicon">
			<div class="layui-inline" title="下载"><i class="el-icon-download"></i></div>
		</div>
		<div class="demoTable" style="padding: 5px;">
			<table id="tablebox_table">
				<div class="tableboxs">
					<!-- 作废章 -->
					<div class="zuofei">
						<img src="../../../../../admin/js-css/img/skin_/zuofei.png" alt="">
					</div>
					<!-- 专用收据表格 -->
					<table border='1' class='tablebox'>
						<caption class="titletop">物业服务有限公司专用收据</caption>
						<caption class="spans">
							<span class="maincol">NO.YGB0044357</span>
						</caption>
						<caption class="spans">
							<div>
								<span>小区：阳光B区</span>
								<span>大楼：B01栋</span>
								<span>单元：1单元</span>
								<span>房间：01-A</span>
								<span>面积：105.00</span>
								<span>姓名：吴磊</span>
								<span>日期：2022-09-28</span>
							</div>
						</caption>
						<tr>
							<th>项目</th>
							<th>缴费期间</th>
							<th>单价</th>
							<th>数量</th>
							<th>金额</th>
							<th>备注</th>
						</tr>
						<tr>
							<td>小区生活垃圾填埋费</td>
							<td>小区名称小区名称小区名称小区名称</td>
							<td>6.00</td>
							<td>1.00</td>
							<td>6.00</td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<th>合计(人民币)</th>
							<th colspan="3" style="text-align: left;">大写：陆元整</th>
							<th>￥：6.00</th>
							<th>现金</th>
						</tr>
					</table>
					
				</div>
				
				<div class="posbottom">
					<div>
						<span>开票人：admin</span>
						<span>收款日期：2022-09-29</span>
						<span>公司盖章：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
					</div>
				</div>
			</table>
		</div>

		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			var vm = new Vue({
				el: '#app',
				data: {

				},
				methods: {

				},

			})
		</script>
	</body>
</html>
